<!doctype html>
<html lang="en">
  <head>
    <title>Vis Network | Node Styles | Images with Opacity</title>

    <style type="text/css">
      #mynetwork {
        width: 600px;
        height: 600px;
        border: 1px solid lightgray;
      }
    </style>

    <script
      type="text/javascript"
      src="../../../standalone/umd/vis-network.min.js"
    ></script>

    <script type="text/javascript">
      var nodes = null;
      var edges = null;
      var network = null;

      var DIR = "../img/refresh-cl/";
      var EDGE_LENGTH_MAIN = 150;
      var EDGE_LENGTH_SUB = 50;

      // Called when the Visualization API is loaded.
      function draw() {
        // Create a data table with nodes.
        nodes = [];

        // Create a data table with links.
        edges = [];

        nodes.push({
          id: 1,
          label: "Main",
          image: DIR + "Network-Pipe-icon.png",
          shape: "image",
          opacity: 0.7,
        });
        nodes.push({
          id: 2,
          label: "Office",
          image: DIR + "Network-Pipe-icon.png",
          shape: "image",
        });
        nodes.push({
          id: 3,
          label: "Wireless",
          image: DIR + "Network-Pipe-icon.png",
          shape: "image",
        });
        nodes.push({ id: 22, label: "Normal", opacity: 1 });
        edges.push({ from: 1, to: 2, length: EDGE_LENGTH_MAIN });
        edges.push({ from: 1, to: 3, length: EDGE_LENGTH_MAIN });
        edges.push({ from: 1, to: 22, length: EDGE_LENGTH_MAIN });

        for (var i = 4; i <= 7; i++) {
          nodes.push({
            id: i,
            label: "Computer",
            image: DIR + "Hardware-My-Computer-3-icon.png",
            shape: "image",
            group: "computer",
            opacity: 1,
          });
          edges.push({ from: 2, to: i, length: EDGE_LENGTH_SUB });
        }

        nodes.push({
          id: 101,
          label: "Printer",
          image: DIR + "Hardware-Printer-Blue-icon.png",
          shape: "image",
        });
        edges.push({ from: 2, to: 101, length: EDGE_LENGTH_SUB });

        nodes.push({
          id: 102,
          label: "Laptop",
          image: DIR + "Hardware-Laptop-1-icon.png",
          shape: "image",
        });
        edges.push({ from: 3, to: 102, length: EDGE_LENGTH_SUB });

        nodes.push({
          id: 103,
          label: "network drive",
          image: DIR + "Network-Drive-icon.png",
          shape: "image",
        });
        edges.push({ from: 1, to: 103, length: EDGE_LENGTH_SUB });

        nodes.push({
          id: 104,
          label: "Internet",
          image: DIR + "System-Firewall-2-icon.png",
          shape: "image",
        });
        edges.push({ from: 1, to: 104, length: EDGE_LENGTH_SUB });

        for (var i = 200; i <= 201; i++) {
          nodes.push({
            id: i,
            label: "Smartphone",
            image: DIR + "Hardware-My-PDA-02-icon.png",
            shape: "image",
          });
          edges.push({ from: 3, to: i, length: EDGE_LENGTH_SUB });
        }

        // create a network
        var container = document.getElementById("mynetwork");
        var data = {
          nodes: nodes,
          edges: edges,
        };
        var options = {
          // nodes: {
          //   opacity: .5
          // },
          groups: {
            computer: {
              opacity: 0.3,
            },
          },
        };
        network = new vis.Network(container, data, options);
      }
    </script>
  </head>

  <body onload="draw()">
    <p>
      Display nodes with global opacity, individual opacity, and opacity in a
      group.
    </p>
    <div id="mynetwork"></div>
  </body>
</html>
